<template>
    <div>
      <van-popup :value="value" @input="$emit('input',$event)" @close="jubao=false" >
    <van-cell-group v-if="!jubao">
      <van-cell @click="dislike()">不感兴趣</van-cell>
      <van-cell is-link @click="jubao=true">反馈垃圾内容</van-cell>
      <van-cell>拉黑作者</van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="jubao=false">返回</van-cell>
      <van-cell v-for="item in reports" :key="item.value" @click="report(item.value)"> {{item.label}}</van-cell>
    </van-cell-group>
  </van-popup>
    </div>
</template>

<script>
import { dislikes, reports as doReport } from '@/api/article.js'
import { reports } from '@/api/constants.js'

export default {
  name: 'more-action',
  // props: ['value'],
  // =======子组件获得父组件的内容，传的值，数组和对象两种接收方式
  props: {
    value: {
      type: Boolean,
      default: false
    },
    articleId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      jubao: false,
      reports

    }
  },
  methods: {
    async  dislike () {
      try {
        // ====不感兴趣
        await dislikes(this.articleId)
        console.log(this.articleId)
        this.$toast.success('操作成功')
        // ============关闭弹窗，子向父发送一个数据关闭
        this.$emit('input', false)
        // =======让父元素删除这个文章，假删除，只需在在当前激活的文章列表数组中减掉就行
        this.$emit('on-del')
      } catch (e) {
        this.$toast.fail('操作失败')
      }
    },
    async  report (type) {
      try {
        // ========举报
        await doReport(this.articleId, type)
        this.$toast.success('举报成功')
        this.$emit('input', false)
        // =======让父元素删除这个文章，假删除，只需在在当前激活的文章列表数组中减掉就行
        this.$emit('on-del')
      } catch (e) {
        if (e.response.status === 409) { this.$toast.fail('该文章已被举报') }
        this.$toast.fail('举报失败')
      }
    }
  }
}
</script>

<style  scoped lang="less">
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>
